import {Button, Descriptions, Drawer, Space, Image, List} from 'antd';
import {connect} from 'umi';
import styles from '../styles.less'

const contentWidth = 280;
const labelWidth = 140;

const Detail = (props) => {
  const {detail, setDetail} = props.data;

  /* 取消操作 */
  function onCancel() {
    setDetail(undefined);
  }

  // 判断详情为空
  if (!detail) {
    return null;
  }

  let orderDetailList = [
    {...detail.data.userOrderDetail}
  ];

  let statusName;
  switch (detail.data.status) {
    case 0:
      statusName = '待付款';
      break;
    case 1:
      statusName = '待使用';
      break;
    case 2:
      statusName = '已完成';
      break;
    case 3:
      statusName = '退款中';
      break;
    case 4:
      statusName = '已退款';
      break;
  }

  let typeName;
  switch (detail.data.type) {
    case 1:
      typeName = '商品';
      break;
    case 2:
      typeName = '服务';
      break;
    case 3:
      typeName = '套餐';
      break;
  }

  return (
    <Drawer
      title={detail ? detail.title : ''}
      width={1000}
      onClose={onCancel}
      open={detail ? detail.visible : false}
      bodyStyle={{paddingBottom: 80}}
      extra={
        <Space>
          <Button onClick={onCancel}>取消</Button>
        </Space>
      }
    >
      <div className={styles.myList798234}>
        <List
          header={<div>订单详情</div>}
          itemLayout="vertical"
          bordered
          size="small"
          dataSource={orderDetailList}
          renderItem={(item) => (
            <List.Item
              key={item.id}
              actions={[
                <>
                  {item.type === 0 && (<Space key={0}>商品</Space>)}
                  {item.type === 1 && (<Space key={0}>服务</Space>)}
                  {item.type === 2 && (<Space key={0}>套餐</Space>)}
                </>,
                <Space key={1}>￥{(item.price / 100).toFixed(2)}</Space>,
                <Space key={1} style={{textDecoration: 'line-through'}}>￥{(item.marketPrice / 100).toFixed(2)}</Space>,
                <>
                  {item.type === 0 && <Space key={2}>共 {item.num} 件</Space>}
                  {item.type === 1 && <Space key={2}>共 {item.num} 次</Space>}
                  {item.type === 2 && <Space key={2}>共 {item.num} 件</Space>}
                </>,
                <>
                  {item.type === 0 && <Space key={3}>剩 {item.hasNum} 件</Space>}
                  {item.type === 1 && <Space key={3}>剩 {item.hasNum} 次</Space>}
                  {item.type === 2 && <Space key={3}>剩 {item.hasNum} 件</Space>}
                </>,
              ]}
              extra={
                <img
                  width={100}
                  alt="logo"
                  src={item.cover}
                />
              }
            >
              <List.Item.Meta
                title={<a href={item.href}>{item.title}</a>}
                description={item.subTitle}
              />
            </List.Item>
          )}
        />
      </div>

      {detail.data.userOrderItems.length>0 && (
        <div className={styles.myList798234} style={{marginTop: 24}}>
          <List
            header={<div>订单项目</div>}
            itemLayout="vertical"
            bordered
            size="small"
            dataSource={detail.data.userOrderItems}
            renderItem={(item) => (
              <List.Item
                key={item.id}
                actions={[
                  <>
                    {item.type === 0 && (<Space key={0}>商品</Space>)}
                    {item.type === 1 && (<Space key={0}>服务</Space>)}
                    {item.type === 2 && (<Space key={0}>套餐</Space>)}
                  </>,
                  <Space key={1}>￥{(item.price / 100).toFixed(2)}</Space>,
                  <Space key={1} style={{textDecoration: 'line-through'}}>￥{(item.marketPrice / 100).toFixed(2)}</Space>,
                  <>
                    {item.type === 0 && <Space key={2}>共 {item.num} 件</Space>}
                    {item.type === 1 && <Space key={2}>共 {item.num} 次</Space>}
                    {item.type === 2 && <Space key={2}>共 {item.num} 件</Space>}
                  </>,
                  <>
                    {item.type === 0 && <Space key={3}>剩 {item.hasNum} 件</Space>}
                    {item.type === 1 && <Space key={3}>剩 {item.hasNum} 次</Space>}
                    {item.type === 2 && <Space key={3}>剩 {item.hasNum} 件</Space>}
                  </>,
                ]}
                extra={
                  <img
                    width={100}
                    alt="logo"
                    src={item.cover}
                  />
                }
              >
                <List.Item.Meta
                  title={<a href={item.href}>{item.title}</a>}
                  description={item.subTitle}
                />
              </List.Item>
            )}
          />
        </div>
      )}

      <div style={{marginTop: 24}}>
        <Descriptions column={2} bordered={true} size={'small'} labelStyle={{textAlign: 'right'}}>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="订单编号">
            {detail.data.orderNo ? detail.data.orderNo : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="订单状态">
            <span style={{color: 'red'}}>{statusName ? statusName : '暂无'}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付金额">
            <span style={{color: 'orangered'}}>{(detail.data.actualAmount / 100).toFixed(2)}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="原始金额">
            <span>{(detail.data.amount / 100).toFixed(2)}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="余额抵扣">
            <span style={{color: 'green'}}>{(detail.data.balanceAmount / 100).toFixed(2)}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="优惠金额">
            <span>{(detail.data.couponAmount / 100).toFixed(2)}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="订单类型">
            <span>{typeName ? typeName : '暂无'}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="取消时间">
            {detail.data.timeCancel ? detail.data.timeCancel : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="商品标题">
            {detail.data.subject ? detail.data.subject : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="商品描述">
            {detail.data.body ? detail.data.body : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="下单时间">
            {detail.data.createTime ? detail.data.createTime : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="备注信息">
            <span style={{color: 'red'}}>{detail.data.remark ? detail.data.remark : '暂无'}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付单号">
            {detail.data.chargeCode ? detail.data.chargeCode : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="付款时间">
            {detail.data.timePaid ? detail.data.timePaid : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="有效时间">
            <span style={{color: 'red'}}>{detail.data.validTime ? detail.data.validTime : '永久不过期'}</span>
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="客户端IP">
            {detail.data.clientIp ? detail.data.clientIp : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="手机号码">
            {detail.data.userInfo && detail.data.userInfo.mobile ? detail.data.userInfo.mobile : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="用户昵称">
            {detail.data.userInfo && detail.data.userInfo.name ? detail.data.userInfo.name : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="用户头像">
            <Image
              width={25} height={25} src={detail.data.userInfo.avatar}
              fallback=""
            />
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="真实姓名">
            {detail.data.userInfo && detail.data.userInfo.realName ? detail.data.userInfo.realName : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付渠道">
            {detail.data.payChannelCode ? detail.data.payChannelCode : '暂无'}
          </Descriptions.Item>
          <Descriptions.Item
            contentStyle={{width: contentWidth}}
            labelStyle={{width: labelWidth}}
            label="支付方式">
            {detail.data.payWayCode ? detail.data.payWayCode : '暂无'}
          </Descriptions.Item>
        </Descriptions>
      </div>


    </Drawer>
  );
};


export default connect(({}) => {
  return {};
})(Detail);

